<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort="{ prop: 'id', order: 'descending' }"
    border
  >
    <el-table-column prop="id" sortable width="80" label="ID" align="center">
    </el-table-column>
    <el-table-column :label="labelTitle" align="center" width="600">
      <template slot-scope="{ row }">
        <div style="display: flex">
          <img :src="row.cover || urls" alt="" />
          <div>
            <p class="left" v-html="row.content"></p>
            <p class="red">{{ "￥" + row.price }}</p>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sub_count" label="订阅量" align="center">
    </el-table-column>
    <el-table-column prop="status" label="状态" align="center">
      <template slot-scope="{ row }">
        <el-tag :type="row.status == 0 ? 'danger' : 'success'">{{
          row.status == 0 ? "已下架" : "已上架"
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="created_time" label="创建时间" align="center">
      <template slot-scope="{ row }">
        {{ row.created_time | timeFilter }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="240">
      <template slot-scope="{ row }">
        <el-button type="primary" size="mini" @click="showDialog(row)"
          >编辑</el-button
        >
        <el-button
          type="success"
          size="mini"
          v-show="row.status == 0"
          @click="updateStatus(row.id, row.status)"
          >上架</el-button
        >
        <el-button
          size="mini"
          v-show="row.status == 1"
          @click="updateStatus(row.id, row.status)"
          >下架</el-button
        >
        <el-popconfirm title="是否要删除该记录?" @onConfirm="delCourse(row.id)">
          <el-button type="danger" size="mini" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    labelTitle: {
      type: String,
      default: () => {
        return "";
      }
    },
    urls: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  data() {
    return {
      formInline: {
        status: "",
        title: ""
      }
    };
  },
  methods: {
    // 删除
    delCourse(id) {
      this.$emit("delCourse", id);
    },
    // 上架 下架
    updateStatus(id, status) {
      this.$emit("updateStatus", { id, status });
    },
    // 编辑
    showDialog(item) {
      this.$emit("showDialog", item);
    }
  },
  filters: {
    // 日期过滤器
    timeFilter(val) {
      let date = new Date();
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, 0)}-${date
        .getDate()
        .toString()
        .padStart(2, 0)} ${date
        .getHours()
        .toString()
        .padStart(2, 0)}:${date
        .getSeconds()
        .toString()
        .padStart(2, 0)}:${date
        .getMinutes()
        .toString()
        .padStart(2, 0)}`;
    }
  }
};
</script>

<style scoped>
img {
  width: 150px;
  height: 100px;
  margin-right: 20px;
}
.left {
  text-align: left;
}
.red {
  color: #ff5500;
  float: left;
}
.el-button + .el-button {
  margin: 0 10px;
}
</style>
